<template>
  <!-- 修改入库单 -->
  <div class="container">
    <div class="left">
      <div class="title">修改入库单</div>
      <!-- #436AE8 -->

      <div v-if="leftContent.orderPurchaseInOrderBase" class="codeInfo">
        <div>
          入库编号：<span style="color: #436ae8">{{
            leftContent.orderPurchaseInOrderBase.purchaseInOrderNo
          }}</span>
        </div>
        <div>
          制单人：{{ leftContent.orderPurchaseInOrderBase.createdName }}
        </div>
        <div>
          制单时间：{{
            $moment(leftContent.orderPurchaseInOrderBase.createdTime)
          }}
        </div>
      </div>

      <div class="leftContext">
        <el-table :data="leftContent.orderPurchaseInOrderItemList">
          <el-table-column
            label="序号"
            type="index"
            width="55"
          ></el-table-column>

          <el-table-column label="供应商">
            <template slot-scope="scope">
              <span @click="openDetails(scope.row)">{{
                scope.row.supplierName
              }}</span>
            </template>
          </el-table-column>

          <el-table-column label="入库部门">
            <template slot-scope="scope">
              <span @click="openDetails(scope.row)">{{
                scope.row.inDepotOrgName
              }}</span>
            </template>
          </el-table-column>

          <el-table-column label="入库仓库">
            <template slot-scope="scope">
              <div @click="openDetails(scope.row)">
                <p style="display: inline-block"  v-for="iten in scope.row.orderPurchaseInOrderProdDepotList" :key="iten.id">
                   <span>{{ iten.inDepotName }}</span>
                   <span v-if='scope.row.orderPurchaseInOrderProdDepotList.length>1'>,</span>
                </p>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="入库商品" width="150px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span @click="openDetails(scope.row)">{{
                scope.row.inDepotProdName
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="图片">
            <template slot-scope="scope">
              <img
                v-if="scope.row.inDepotProdImage"
                @click="openDetails(scope.row)"
                style="width: 50px; height: 50px"
                :src="ImgHttps + scope.row.inDepotProdImage"
                alt=""
              />
              <span v-else>/</span>
            </template>
          </el-table-column>
          <el-table-column label="入库类型">
            <template slot-scope="scope">
              <span
                @click="openDetails(scope.row)"
                v-if="scope.row.inDepotProdType == 1"
                >商品</span
              >
              <span @click="openDetails(scope.row)" v-else>赠品</span>
            </template>
          </el-table-column>
          <el-table-column label="品牌">
            <template slot-scope="scope">
              <span @click="openDetails(scope.row)">{{
                scope.row.inDepotProdBrandName
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="入库数量">
            <template slot-scope="scope">
              <span @click="openDetails(scope.row)">{{
                scope.row.inDepotProdQuantity
              }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column label="分类">
            <template slot-scope="scope">
              <span @click="openDetails(scope.row)">{{
                scope.row.typeName
              }}</span>
            </template>
          </el-table-column> -->
          <el-table-column label="入库单价">
            <template slot-scope="scope">
              <span @click="openDetails(scope.row)">{{
                scope.row.purchaseProdPrice
              }}</span>
            </template>
          </el-table-column>

          <el-table-column label="入库金额">
            <template slot-scope="scope">
              <span @click="openDetails(scope.row)">{{
                scope.row.purchaseProdAmount
              }}</span>
            </template>
          </el-table-column>

          <el-table-column label="未入库数量" width="130px;">
            <template slot-scope="scope">
              <span @click="openDetails(scope.row)">{{
                scope.row.notInDepotProdQuantity
              }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="right">
      <div class="title">操作</div>
      <div class="rightContext" style="border: 0">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="入库部门">
            <div class="selectTree">
              <treeselect
                disabled
                :options="options"
                v-model="form.inDepotOrgCode"
                search-nested
                :normalizer="normalizer"
                noResultsText="未找到"
                placeholder="请选择"
              >
              </treeselect>
            </div>
          </el-form-item>
          <el-form-item label="供应商">
            <el-input
              size="small"
              placeholder="请输入供应商名称"
              :value="form.supplierName"
              supplierName
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="入库类型">
            <el-input
              size="small"
              placeholder="请输入入库类型"
              :value="form.inDepotProdType == 1 ? '商品' : '赠品'"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="入库商品">
            <el-input
              size="small"
              placeholder="请输入入库商品"
              :value="form.inDepotProdName"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="入库规格">
            <el-input
              size="small"
              placeholder="请输入入库规格"
              :value="form.inDepotProdSpecificationName"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="入库品牌">
            <el-input
              size="small"
              placeholder="请输入入库品牌"
              :value="form.inDepotProdBrandName"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="入库金额">
            <el-input
              size="small"
              placeholder="请输入入库金额"
              :value="form.purchaseProdAmount"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="入库数量">
            <el-input
              disabled
              size="small"
              placeholder="请输入入库数量"
              :value="form.inDepotProdQuantity"
            ></el-input>
          </el-form-item>
          <el-form-item label="入库仓库">
            <div
              v-for="(ite, index) in form.orderPurchaseInOrderProdDepotList"
              :key="index"
              v-if="ite.type == 0 || ite.type == undefined"
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
                min-width:450px;
              "
            >
              <el-select
                :value="ite.inDepotName"
                size="mini"
                value-key="id"
                placeholder="请选择"
                disabled
                @change="myWareListChange($event, ite)"
              >
                <el-option
                  v-for="item in wareList.list"
                  :key="item.id"
                  :label="item.name"
                  :value="item"
                >
                </el-option>
              </el-select>
              <div style="display: flex; align-items: center">
                可操作数:{{(ite.canOperateQuantity + ite.purchaseProdNotInDepotQuantity) - ite.inDepotProdQuantity}}
                <el-input-number
                  size="mini"
                  :min="0"
                  style="margin-right: 10px"
                  placeholder="请输入库存数量"
                  v-model="ite.inDepotProdQuantity"
                  :max="ite.canOperateQuantity + ite.purchaseProdNotInDepotQuantity"
                  @change="inputChange(ite)"
                ></el-input-number>

                <!-- <i
                  class="el-icon-remove-outline"
                  style="cursor: pointer"
                  @click="deleteMyWare(ite, ite.type != undefined ? 1 : 0)"
                ></i> -->
              </div>
            </div>
            <!-- <i
              class="el-icon-circle-plus-outline"
              style="cursor: pointer"
              @click="addMyWareList(form)"
            ></i> -->
          </el-form-item>
          <el-form-item label="备注">
            <el-input maxlength="255" placeholder="请输入备注" type="textarea" v-model="textarea"></el-input>
          </el-form-item>
        </el-form>
        <p style="text-align: right; margin-top: 50px">
          <el-button type="primary" size="mini" @click="submit">提交</el-button>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  components: { Treeselect },
  data() {
    return {
      table: {
        list: [],
        pageNo: 1,
        pageSize: 10,
      },
      form: {}, //表单数据
      wareList: {
        list: [],
      },
      leftContent: "",
      normalizer(node) {
        return {
          id: node.orgCode,
          label: node.orgName,
          children: node.children,
        };
      },
      options: [],
      textarea:""
    };
  },
  created() {
    this.listAxios(this.$route.query.purchaseInOrderNo);
    this.department();
  },
  activated() {
    this.getWareList();
  },
  methods: {
    openDetails(row) {
      this.form = row;
    },
    // 部门选择列表
    department() {
      this.axios
        .post(
          "/sys/v1/org/tree/select",
          {
            request: {
              orgName: "",
              orgType: "",
            },
            version: "",
          },
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          if (res.code == 0) {
            this.options = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    // 数据请求
    listAxios(purchaseInOrderNo) {
      this.axios
        .post("/order/v1/purchase/in/order/item/list", {
          request: {
            purchaseInOrderNo: purchaseInOrderNo,
          },
          version: "",
        })
        .then((res) => {
          //   console.log(res);
          if (res.code == 0) {
            this.textarea = res.data.orderPurchaseInOrderBase.comment;
            for (let i in res.data.orderPurchaseInOrderItemList) {
              res.data.orderPurchaseInOrderItemList[
                i
              ].beforeInDepotProdQuantity =
                res.data.orderPurchaseInOrderItemList[i].inDepotProdQuantity; //存储之前的入库商品数量
              res.data.orderPurchaseInOrderItemList[
                i
              ].beforeNotInDepotProdQuantity =
                res.data.orderPurchaseInOrderItemList[i].notInDepotProdQuantity; //存储之前的未入库商品数量
            }
            this.leftContent = res.data;
            this.form = this.leftContent.orderPurchaseInOrderItemList[0];
          } else {
            this.$message.error(res.message);
          }
        });
    },
    delectImgList(index) {
      this.form.fileListImg.splice(index, 1);
    },
    addMyWareList(param) {
      if (this.form.warehouses.length < this.wareList.list.length) {
        this.form.selectObj.push({
          comId: param.id,
          number: 0,
          warId: "",
          warName: "",
        });
      } else {
        this.$message.warning("不能再加了仓库只有这些");
      }
    },
    //删除现在的仓库
    deleteMyWare(e, t) {
      if (t) {
        let temp = this.form.selectObj.find((res) => res.warId === e.warId);
        temp.type = 1;
      } else {
        this.form.selectObj.splice(
          this.form.selectObj.findIndex((res) => res.warId == e.warId),
          1
        );
      }
      this.numberTotalWare();
    },
    //自己选择的仓库修改了
    myWareListChange(e1, e2) {
      let temp = this.form.orderPurchaseInOrderProdDepotList.find(
        (res) => e1.id == res.warId
      );
      if (temp) {
        if (temp.type) {
          this.$message.warning("该仓库已删除不能选");
        } else {
          this.$message.warning("该仓库已存在");
        }
        return;
      }
      e2.warId = e1.id + "";
      e2.warName = e1.name;
      this.$forceUpdate();
    },
    inputChange(e) {
      this.numberTotalWare();
    },
    // 计算入库总库存
    numberTotalWare() {
      let numberTotal = 0;
      let price = 0;
      for (let i in this.form.orderPurchaseInOrderProdDepotList) {
        if(this.form.orderPurchaseInOrderProdDepotList[i]
          .inDepotProdQuantity){
            numberTotal += this.form.orderPurchaseInOrderProdDepotList[i]
          .inDepotProdQuantity;    
          }else{
            this.form.orderPurchaseInOrderProdDepotList[i]
          .inDepotProdQuantity = 0;
          }
      }
      this.form.purchaseProdAmount = numberTotal * this.form.purchaseProdPrice;
      this.form.inDepotProdQuantity = numberTotal;
      //   计算未入库总数量
      this.form.notInDepotProdQuantity =
        this.form.beforeNotInDepotProdQuantity +
        (this.form.beforeInDepotProdQuantity - numberTotal);
      if (this.form.notInDepotProdQuantity < 0) {
        this.form.notInDepotProdQuantity = 0;
      }
    },
    getWareList() {
      this.axios
        .post("order/comm/commWarehouse/list",{
        pageSize:999,
        pageNo:1
      }, {
          isLoading: false,
        })
        .then((res) => {
          //仓库数据接口
          this.wareList = res.data;
          this.wareList.list = this.wareList.list.reverse();
        });
    },

    // 数据提交
    submit: _.debounce(function () {
      // 数据处理
      let itemList = [];
      let items = this.leftContent.orderPurchaseInOrderItemList;
      for (let i in items) {
        //   判断入库数据的对错
        if (
          items[i].beforeNotInDepotProdQuantity +
            items[i].beforeInDepotProdQuantity <
          items[i].inDepotProdQuantity
        ) {
          this.$message.warning(
            items[i].inDepotProdName + ",入库数量不能大于采购数量"
          );
          return false;
        }
        items[i].depotBaseDtoList = [];
        // 仓库数据过滤

        for (let u in items[i].orderPurchaseInOrderProdDepotList) {
          items[i].depotBaseDtoList.push({
            id: items[i].orderPurchaseInOrderProdDepotList[u].orderPurchaseProdDepotId,
            depotQuantity:
              items[i].orderPurchaseInOrderProdDepotList[u].inDepotProdQuantity,
          });
        }

        itemList.push({
          id: items[i].purchaseOrderItemId,
          inDepotQuantity: items[i].inDepotProdQuantity,
          notInDepotQuantity: items[i].notInDepotProdQuantity,
          depotBaseDtoList: items[i].depotBaseDtoList,
        });
      }
      this.axios
        .post("/order/v1/purchase/in/order/update", {
          request: {
            purchaseInOrderNo: this.leftContent.orderPurchaseInOrderBase
              .purchaseInOrderNo, //采购入库订单号
            purchaseOrderNo: this.leftContent.orderPurchaseInOrderBase
              .purchaseOrderNo, //采购订单号
            addPurchaseInOrderDtoList: itemList,
            comment:this.textarea
          },
          version: "",
        })
        .then((res) => {
          console.log(res);
          if (res.code == 0) {
            this.$message.success("修改成功!");
            this.$router.push({ name: "purchasingAddList" });
          } else {
            this.$message.error(res.message);
          }
        });
    }, 300),

    // 递归
    getMenuBtnList(menuTreeList, menuList, code) {
      for (let item of menuTreeList) {
        if (item.orgCode == code) {
          menuList.push({
            lable: item.orgName,
            orgCode: item.orgCode,
            type: item.type,
          });
        } else if (item.children && item.children.length > 0) {
          this.getMenuBtnList(item.children, menuList, code);
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  display: flex;
  height: 100%;
  .left {
    overflow: auto;
    background: #fff;
    padding: 10px;
    flex: 1;
    min-width: 600px;
    .title {
      color: #6b6b6b;
      font-size: 16px;
      border-bottom: 2px solid #e3e7ec;
      padding-bottom: 10px;
    }
    .leftContext {
      margin-top: 10px;
      border: 1px solid#E3E7EC;
    }
  }
  .right {
    overflow: auto;
    flex: 1;
    background: #fff;
    padding: 10px;
    margin-left: 10px;
    min-width: 400px;
    .title {
      color: #6b6b6b;
      font-size: 16px;
      border-bottom: 2px solid #e3e7ec;
      padding-bottom: 10px;
    }
    .rightContext {
      margin-top: 10px;
      border: 1px solid#E3E7EC;
    }
  }
}
.codeInfo {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
  div {
    font-size: 15px;
    color: #666;
  }
}
/deep/.el-table th > .cell {
  color: #333;
}
/deep/.el-form-item {
  margin-bottom: 10px;
}
.liimg {
  position: relative;
  display: inline-block;
  margin-right: 12px;
  width: 80px;

  p {
    text-align: center;
    font-size: 12px;
    color: #666;
  }

  .close {
    position: absolute;
    top: -20px;
    right: -10px;
    z-index: 10;
  }

  .close:hover {
    cursor: pointer;

    i {
      color: #006af1;
    }
  }

  .img-avatar {
    width: 80px;
    height: 80px;
    border-radius: 5px;
  }
}

.selectTree {
  width: 100%;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  height: 30px;

  /deep/.el-cascader .el-input .el-input__inner {
    line-height: 30px;
    height: 30px;
    width: 100%;
  }
  /deep/.el-cascader .el-input {
    width: 250px;
  }
}
/deep/.vue-treeselect {
  height: 30px;
}
/deep/.vue-treeselect--searchable .vue-treeselect__input-container {
  height: 30px;
  line-height: 30px;
}
/deep/.vue-treeselect__single-value {
  font-size: 14px;
  line-height: 30px;
}
/deep/.vue-treeselect__menu-container {
  font-size: 15px;
}
/deep/.vue-treeselect__multi-value-item {
  height: 20px;
  line-height: 20px;
  padding: 0;
}
/deep/.vue-treeselect__input {
  height: 28px;
  line-height: 28px;
  outline: none;
  border: none;
  padding: 0;
  // display: none;
  // border:1px solid #000;
}
/deep/.vue-treeselect__placeholder {
  font-size: 10px;
  line-height: 28px;
}
/deep/.vue-treeselect--has-value .vue-treeselect__multi-value {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/deep/.vue-treeselect__control {
  height: 30px;
}
</style>